<template>
  <div class="booking-container">
    <!-- 添加搜索框 -->
    <div
      class="search-bar"
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <el-input
        v-model="searchQuery"
        placeholder="请输入会议室名称"
        @keyup.enter="searchMeetingRooms"
      >
        <template #append>
          <el-button icon="el-icon-search" @click="searchMeetingRooms"
            >搜索</el-button
          >
        </template>
      </el-input>
      <el-button
        type="primary"
        @click="showDispatchDialog"
        style="margin-left: 10px"
      >
        预约申请
      </el-button>
    </div>
    <div class="meeting-rooms">
      <div
        v-for="(room, index) in meetingRooms"
        :key="index"
        class="room-card"
        :class="getStatusClass(room.status)"
      >
        <img :src="roomImage(room.type)" alt="会议室图片" class="room-image" />
        <div class="room-info">
          <h3>{{ room.name }}</h3>
          <p>类型：{{ roomType(room.type) }}</p>
          <p>容量：{{ room.capacity }}人</p>
          <p>价格：¥{{ room.pricePerHour }}/小时</p>
          <div class="status-indicator">
            {{ roomStatus(room.status) }}
          </div>
          <div class="button-group" style="justify-content: flex-start">
            <button
              v-if="room.status === 0"
              @click="order(room.roomId)"
              class="order-button"
            >
              下单
            </button>
            <el-dropdown>
              <button @click="showEquipment(room.roomId)">设备展示</button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    v-for="(device, index) in equipmentList[room.roomId]"
                    :key="index"
                  >
                    <div
                      style="
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        width: 100%;
                      "
                    >
                      <span>{{ device.name }}</span>
                    </div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>

            <button @click="showEnvironment(room.roomId)">
              内部环境 ({{ imageCounts[room.roomId]?.environment || 0 }})
            </button>
            <button @click="showComments(room.roomId)">
              评论 ({{ commentCounts[room.roomId] || 0 }})
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 图片展示弹窗 -->
    <el-dialog
      v-model="showImageDialog"
      :title="`${currentRoomName} - 环境展示`"
      width="80%"
      top="5vh"
      custom-class="image-gallery-dialog"
    >
      <div class="gallery-container">
        <div class="gallery-wrapper" :style="galleryWrapperStyle">
          <div
            v-for="(img, index) in currentRoomImages"
            :key="index"
            class="gallery-item"
            :class="{ active: currentIndex === index }"
            :style="getItemStyle(index)"
          >
            <img :src="img" alt="会议室环境图片" />
          </div>
        </div>
        <button class="nav-arrow left" @click="prevImage">
          <i class="el-icon-arrow-left"></i>
        </button>
        <button class="nav-arrow right" @click="nextImage">
          <i class="el-icon-arrow-right"></i>
        </button>
      </div>
      <div class="pagination">
        <span
          v-for="i in currentRoomImages.length"
          :key="i"
          :class="{ active: currentIndex === i - 1 }"
          @click="goToImage(i - 1)"
        >
          {{ i }}
        </span>
      </div>
    </el-dialog>

    <!-- 预定对话框 -->
    <el-dialog v-model="dialogVisible" title="会议室预定" width="500px">
      <el-form :model="formData" :rules="rules" ref="orderForm">
        <div class="demo-datetime-picker">
          <div class="block">
            <el-date-picker
              v-model="formData.dateRange"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              date-format="YYYY/MM/DD ddd"
              time-format="A hh:mm:ss"
            />
          </div>
        </div>
        <el-form-item label="参会人数" prop="num">
          <el-input-number
            v-model="formData.num"
            :min="1"
            :max="100"
            placeholder="请输入参会人数"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitOrder">提交订单</el-button>
      </template>
    </el-dialog>

    <!-- 预约申请对话框 -->
    <el-dialog v-model="dispatchDialogVisible" title="预约申请" width="500px">
      <el-form :model="dispatchForm" ref="dispatchForm">
        <div class="demo-datetime-picker">
          <div class="block">
            <el-date-picker
              v-model="dispatchForm.dateRange"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              date-format="YYYY/MM/DD ddd"
              time-format="A hh:mm:ss"
            />
          </div>
        </div>
        <el-form-item label="参会人数" prop="num">
          <el-input-number
            v-model="dispatchForm.num"
            :min="1"
            :max="100"
            placeholder="请输入参会人数"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dispatchDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitDispatch">提交申请</el-button>
      </template>
    </el-dialog>

    <!-- 新增支付对话框 -->
    <el-dialog v-model="payDialogVisible" title="订单支付" width="400px">
      <el-form :model="payForm" ref="paymentForm">
        <el-form-item
          label="会议室名称"
          prop="roomName"
          v-if="payForm.roomName"
        >
          <el-input v-model="payForm.roomName" disabled />
        </el-form-item>
        <el-form-item label="订单号" prop="orderId">
          <el-input v-model="payForm.orderId" disabled />
        </el-form-item>
        <el-form-item label="支付金额" prop="totalPrice">
          <el-input-number
            v-model="payForm.totalPrice"
            :precision="2"
            :min="0.01"
            disabled
          />
        </el-form-item>
        <el-form-item label="支付方式" prop="paymentMethod">
          <el-select
            v-model="payForm.paymentMethod"
            placeholder="请选择支付方式"
          >
            <el-option label="支付宝" value="alipay" />
            <el-option label="微信支付" value="wechat" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="payDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitPayment">立即支付</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="commentDialogVisible" title="用户评论" width="60%">
      <div class="comment-list">
        <div
          v-for="(comment, index) in comments"
          :key="index"
          class="comment-item"
          @contextmenu.prevent="checkCommentOwnership(comment.commentId)"
        >
          <div class="comment-header">
            <el-avatar :size="32" :src="'//empty'" icon="el-icon-user-solid" />
            <span class="user-name">{{ comment.commitName }}</span>
          </div>
          <div class="comment-meta">
            于 {{ formatDate(comment.useAt) }} 使用该会议室后， 在
            {{ formatDate(comment.createAt) }} 发布了
            <el-rate v-model="comment.likesCount" disabled :max="5" />
            评价
          </div>
          <div class="comment-content">
            {{ comment.content }}
            <el-button
              v-if="commentOwnership[comment.commentId]"
              type="danger"
              size="mini"
              @click="deleteComment(comment.commentId, false)"
            >
              删除
            </el-button>
            <el-button size="mini" @click="openReplyDialog(comment.commentId,comment.commentId)"
              >回复</el-button
            >
          </div>
          <el-button
            type="text"
            @click="fetchSubComments(comment.commentId)"
            v-if="!subComments[comment.commentId]"
          >
            展开回复 ({{ subCommentCounts[comment.commentId] || 0 }})
          </el-button>

          <div v-if="subComments[comment.commentId]" class="sub-comments">
            <el-button type="text" @click="closeSubComments(comment.commentId)">
              收起回复
            </el-button>
            <div
              v-for="sub in subComments[comment.commentId]"
              :key="sub.commentId"
              class="sub-comment"
              @contextmenu.prevent="checkCommentOwnership(sub.commentId)"
            >
              <div class="sub-comment-meta" style="font-size: 0.8em;">
                {{ sub.commitName }}<span style="color: #409EFF">({{ sub.type === 0 ? '公司人员' : '客户' }})</span> 回复 {{ sub.replyerName }}
                <span class="sub-comment-time">{{ formatDate(sub.createAt) }}</span>
              </div>
              <div class="sub-content">
                {{ sub.content }}
                
                <el-button
                  v-if="commentOwnership[sub.commentId]"
                  type="danger"
                  size="mini"
                  @click="deleteComment(sub.commentId, true)"
                >
                  删除
                </el-button>
                <el-button
                  size="mini"
                  @click="openReplyDialog(sub.commentId, comment.commentId)"
                >
                  回复
                </el-button>
              </div>
            </div>
          </div>
          <el-divider />
        </div>
      </div>
      <el-pagination
        layout="prev, pager, next"
        :page-size="10"
        :total="commentPagination.totalCount"
        :current-page="commentPagination.pageNo"
        @current-change="handlePageChange"
      />
    </el-dialog>
    <el-dialog v-model="replyDialogVisible" title="回复评论" width="500px">
      <el-form :model="replyForm">
        <el-form-item label="回复内容">
          <el-input v-model="replyForm.content" type="textarea" :rows="4" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="replyDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitReply">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import { reactive, ref } from "vue";
import querystring from "querystring";
export default {
  data() {
    return {
      searchQuery: "", // 添加搜索关键词
      meetingRooms: [],
      imageCounts: reactive({}),
      commentCounts: {},
      equipmentList: reactive({}),
      showImageDialog: false,
      currentRoomId: null,
      currentRoomName: "",
      currentRoomImages: [],
      currentIndex: 0,
      payDialogVisible: false, // 新增支付对话框的可见性
      galleryTransform: 0,
      dialogVisible: false,
      dispatchDialogVisible: false, // 新增预约申请对话框
      dispatchForm: {
        dateRange: [],
        startDate: null,
        endDate: null,
        num: 1,
      },
      formData: {
        roomId: null,
        dateRange: [],
        startDate: null,
        endDate: null,
        num: 1,
      },
      commentDialogVisible: false,
      comments: [],
      commentPagination: {
        pageNo: 1,
        totalCount: 0,
        pageSize: 10,
      },
      currentCommentRoomId: null,
      subComments: {}, // 新增子评论存储对象
      subCommentCounts: reactive({}),
      commentOwnership: reactive({}),
      replyDialogVisible: false,
      replyForm: {
        content: "",
        commentId: null,
        replyId: null,
      },
      commentTimers: reactive({}), // 新增评论定时器对象
    };
  },
  mounted() {
    this.fetchMeetingRooms();
  },
  methods: {
    showDispatchDialog() {
      this.dispatchDialogVisible = true;
    },
    openReplyDialog(replyId,commentId) {
      this.replyForm.commentId = commentId;
      this.replyForm.replyId = replyId; // 回复的评论 ID 与被回复的评论 ID 相同
      this.replyDialogVisible = true;
    },
    async submitReply() {
      try {
        const response = await axios.post("api/comment/commentsubmit", querystring.stringify({
          content: this.replyForm.content,
          commentId: this.replyForm.commentId,
          replyId: this.replyForm.replyId,
        }),
        {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        });
        if (response.data.code === 200) {
          this.$message.success("回复成功");
          this.replyDialogVisible = false;
          this.fetchSubComments(this.replyForm.commentId);
          this.fetchCommentCounts();
          this.fetchSubCommentCounts(this.replyForm.commentId);// 刷新评论列表
        }
        else {
          this.$message.error(response.data.info);
        }
      } catch (error) {
        this.$message.error("回复失败");
      }
    },
    async submitDispatch() {
      try {
        this.dispatchForm.startDate = this.dispatchForm.dateRange[0];
        this.dispatchForm.endDate = this.dispatchForm.dateRange[1];

        const response = await axios.post("api/customer/orders/dispatch", {
          roomId: null,
          startDate: this.dispatchForm.startDate,
          endDate: this.dispatchForm.endDate,
          num: this.dispatchForm.num,
        });

        if (response.data.code === 200) {
          this.payForm = {
            orderId: response.data.data.orderId,
            totalPrice: response.data.data.totalPrice,
            createdAt: response.data.data.createdAt,
            paymentMethod: null,
            roomName: response.data.data.roomName || null,
          };
          this.payDialogVisible = true;
          this.dispatchDialogVisible = false;
        } else {
          this.$message.error(response.data.info);
        }
      } catch (error) {
        console.error("提交预约申请失败:", error);
        this.$message.error("预约申请提交失败");
      }
    },
    async order(roomId) {
      console.log("Order button clicked"); // 调试信息
      this.currentRoomId = roomId;
      this.formData.roomId = roomId;
      this.dialogVisible = true;
    },
    async submitOrder() {
      try {
        await this.$refs.orderForm.validate();
        this.formData.startDate = this.formData.dateRange[0];
        this.formData.endDate = this.formData.dateRange[1];

        const response = await axios.post("api/customer/orders/add", {
          roomId: this.currentRoomId,
          startDate: this.formData.startDate,
          endDate: this.formData.endDate,
          num: this.formData.num,
        });

        if (response.data.code === 200) {
          // 设置支付表单数据
          this.payForm = {
            orderId: response.data.data.orderId,
            totalPrice: response.data.data.totalPrice,
            createdAt: response.data.data.createdAt,
            paymentMethod: null,
            roomName: response.data.data.roomName || null,
          };
          this.payDialogVisible = true; // 显示支付对话框
        } else {
          this.$message.error(response.data.info);
        }
        this.dialogVisible = false;
        this.$refs.orderForm.resetFields();
        this, this.fetchMeetingRooms();
      } catch (error) {
        console.error("提交订单失败:", error);
        this.$message.error("订单提交失败，请检查表单");
      }
    },
    async order(roomId) {
      this.currentRoomId = roomId; // 存储当前房间ID
      this.formData.roomId = roomId;
      this.dialogVisible = true;
    },
    async submitPayment() {
      try {
        await this.$refs.paymentForm.validate();
        const response = await axios.post(
          "api/customer/orders/confirm",
          querystring.stringify({
            orderId: this.payForm.orderId,
          })
        );

        if (response.data.code === 200) {
          this.$message.success("支付成功");
          this.payDialogVisible = false;
          this.fetchMeetingRooms(); // 刷新会议室数据
        } else {
          this.$message.error(response.data.info);
        }
      } catch (error) {
        console.error("支付失败:", error);
        this.$message.error("支付处理失败");
      }
    },
    async fetchImageCounts() {
      try {
        await Promise.all(
          this.meetingRooms.map(async (room) => {
            const res = await axios.get("api/customer/meetingRoom/imageCount", {
              params: { roomId: room.roomId },
            });
            this.imageCounts[room.roomId] = {
              environment: res.data.data,
            };
          })
        );
      } catch (error) {
        console.error("获取图片数量失败:", error);
      }
    },
    async showEquipment(roomId) {
      try {
        if (!this.equipmentList[roomId]) {
          const res = await axios.get("api/customer/meetingRoom/device", {
            params: { roomId },
          });
          this.equipmentList[roomId] = res.data.data;
        }
        // 移除对 equipmentDropdowns 的操作
      } catch (error) {
        console.error("获取设备失败:", error);
      }
    },
    async getRoomImage(roomId, index) {
      try {
        const response = await axios.get("api/customer/meetingRoom/image", {
          params: { roomId, index },
          responseType: "blob",
        });
        return URL.createObjectURL(response.data);
      } catch (error) {
        console.error("获取图片失败:", error);
        return null;
      }
    },
    async showEnvironment(roomId) {
      const imageCount = this.imageCounts[roomId]?.environment || 0;
      this.currentRoomImages = await Promise.all(
        Array.from({ length: imageCount }, (_, index) =>
          this.getRoomImage(roomId, index + 1)
        )
      );
      this.showImageDialog = true;
    },
    async fetchMeetingRooms() {
      try {
        const response = await axios.get("api/customer/meetingRoom");
        this.meetingRooms = response.data.data;
        this.fetchImageCounts();
        this.fetchCommentCounts();
      } catch (error) {
        console.error("获取会议室数据失败:", error);
      }
    },
    async fetchCommentCounts() {
      try {
        await Promise.all(
          this.meetingRooms.map(async (room) => {
            const res = await axios.get("api/comment/getCommentCount", {
              params: { roomId: room.roomId },
            });
            this.commentCounts[room.roomId] = res.data.data;
          })
        );
      } catch (error) {
        console.error("获取评论数量失败:", error);
      }
    },
    async showComments(roomId) {
      this.currentCommentRoomId = roomId;
      this.commentPagination.pageNo = 1;
      this.commentDialogVisible = true;
      await this.fetchComments();
    },
    async fetchComments() {
      try {
        const res = await axios.get("api/comment/getFrtComment", {
          params: {
            roomId: this.currentCommentRoomId,
            pageNo: this.commentPagination.pageNo,
          },
        });
        this.comments = res.data.data.list;
        this.commentPagination.totalCount = res.data.data.totalCount;

        // 新增：获取每个主评论的子评论数量
        this.comments.forEach((comment) => {
          this.fetchSubCommentCounts(comment.commentId);
        });
      } catch (error) {
        console.error("获取评论失败:", error);
      }
    },
    async fetchSubCommentCounts(commentId) {
      try {
        const res = await axios.get("api/comment/getSecondCommentCount", {
          params: { commentId },
        });
        this.subCommentCounts[commentId] = res.data.data;
      } catch (error) {
        console.error("获取子评论数量失败:", error);
      }
    },
    
    async fetchSubComments(commentId) {
      try {
        const res = await axios.get("api/comment/getSecondComment", {
          params: { commentId },
        });
        this.subComments[commentId] = res.data.data;
        // 启动定时刷新
        this.commentTimers[commentId] = setInterval(async () => {
          try {
            const res = await axios.get("api/comment/getSecondComment", {
              params: { commentId },
            });
            this.subComments[commentId] = res.data.data;
          } catch (error) {
            console.error("定时获取子评论失败:", error);
          }
        }, 1500);
      } catch (error) {
        console.error("获取子评论失败:", error);
      }
    },
    handlePageChange(page) {
      this.commentPagination.pageNo = page;
      this.fetchComments();
    },
    formatDate(dateString) {
      return dateString ? new Date(dateString).toLocaleString() : "";
    },
    closeSubComments(commentId) {
      if (this.commentTimers[commentId]) {
        clearInterval(this.commentTimers[commentId]);
        delete this.commentTimers[commentId];
      }
    delete this.subComments[commentId];
    },
    async searchMeetingRooms() {
      try {
        const response = await axios.get("api/customer/meetingRoom/search", {
          params: { FuzzyName: this.searchQuery },
        });
        this.meetingRooms = response.data.data;
      } catch (error) {
        console.error("搜索会议室失败:", error);
      }
    },
    roomImage(type) {
      return require(`@/assets/${type ? "meetingroom" : "classroom"}.png`);
    },
    roomType(type) {
      return type ? "圆桌型" : "教室型";
    },
    roomStatus(status) {
      const statusMap = ["空闲", "锁定", "预定中", "使用中", "维护中"];
      return statusMap[status] || "未知状态";
    },
    getItemStyle(index) {
      const offset = (index - this.currentIndex) * 100;
      const scale = index === this.currentIndex ? 1 : 0.8;
      const zIndex = index === this.currentIndex ? 10 : 1;
      return {
        transform: `translateX(${offset}%) scale(${scale})`,
        zIndex: zIndex,
        opacity: index === this.currentIndex ? 1 : 0.6,
      };
    },

    getStatusClass(status) {
      return {
        "status-free": status === 0,
        "status-locked": status === 1,
        "status-reserved": status === 2,
        "status-inuse": status === 3,
        "status-maintenance": status === 4,
      };
    },
    goToImage(index) {
      this.currentIndex = index;
    },
    prevImage() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
      }
    },
    nextImage() {
      if (this.currentIndex < this.currentRoomImages.length - 1) {
        this.currentIndex++;
      }
    },
    async checkCommentOwnership(commentId) {
      try {
        const response = await axios.post(
          "api/comment/IsMine",
          querystring.stringify({ commentId })
        );
        this.commentOwnership[commentId] = response.data.data === "yes";
      } catch (error) {
        console.error("权限检查失败:", error);
        this.$message.error("权限验证失败");
      }
    },

    async deleteComment(commentId) {
      try {
        await axios.post(
          "api/comment/del",
          querystring.stringify({ commentId })
        );
        this.fetchComments();
        this.$message.success("删除成功");
      } catch (error) {
        console.error("删除失败:", error);
        this.$message.error("删除失败");
      }
    },
  },
  watch: {
    commentDialogVisible(newVal) {
      if (!newVal) {
        Object.values(this.commentTimers).forEach(timer => clearTimeout(timer));
        this.commentTimers = reactive({});
      }
    }
  },
};
</script>

<style scoped>
.comment-list {
  max-height: 60vh;
  overflow-y: auto;
}

.comment-item {
  margin-bottom: 20px;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.user-name {
  font-weight: 500;
  color: #333;
}

.comment-meta {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.comment-content {
  line-height: 1.6;
  color: #444;
}

.el-pagination {
  margin-top: 20px;
  justify-content: center;
}
.comment-item {
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}
.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.comment-name {
  margin-left: 10px;
  font-weight: bold;
}
.comment-time {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}
.comment-content {
  margin-bottom: 8px;
  line-height: 1.5;
}
.comment-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}
/* 添加搜索框样式 */
.search-bar {
  margin-bottom: 20px;
  max-width: 400px;
}

.booking-container {
  padding: 20px;
}

.meeting-rooms {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.room-card {
  flex: 0 0 24%;
  box-sizing: border-box;
  padding: 10px;
}

@media (max-width: 768px) {
  .room-card {
    flex: 1 1 100%;
  }
}
.room-image {
  height: 65%;
}

.room-info {
  background-color: #f0f8ff;
  height: 35%;
}

.room-card:hover {
  transform: translateY(-2px);
}

.room-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.room-info {
  padding: 15px;
}

.button-group {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 15px;
}

.button-group .order-button {
  background-color: #67c23a;
  border-color: #67c23a;
}

.button-group button {
  padding: 8px 12px;
  border: 2px solid #2196f3;
  border-radius: 4px;
  background-color: #258996;
  color: white;
  cursor: pointer;
  transition: opacity 0.3s;
}

.button-group button:hover {
  opacity: 0.9;
}

.status-indicator {
  padding: 5px 10px;
  border-radius: 4px;
  color: white;
  margin-top: 10px;
  display: inline-block;
}

.status-free {
  background-color: #258996;
}
.status-locked {
  background-color: #af817d;
}
.status-reserved {
  background-color: #ffc107;
}
.status-inuse {
  background-color: #2196f3;
}
.status-maintenance {
  background-color: #9e9e9e;
}
.equipment-dropdown {
  position: relative;
  background: #f0f8ff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-top: 0;
  top: 0;
  z-index: 1;
}

.device-item {
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
  font-size: 12px;
}

.device-item:last-child {
  border-bottom: none;
}
.image-gallery-dialog {
  max-width: 1200px;
}

.gallery-container {
  position: relative;
  height: 500px;
  overflow: hidden;
  margin: 0 auto;
  perspective: 1000px;
  background-color: #7ba6cc;
}

.gallery-wrapper {
  display: flex;
  height: 100%;
  align-items: center;
  transform-style: preserve-3d;
}

.gallery-item {
  position: absolute;
  width: 80%;
  height: 80%;
  transition: all 0.5s ease;
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.gallery-item.active {
  transform: translateX(0) scale(1) !important;
  z-index: 10 !important;
  opacity: 1 !important;
}

.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.7);
  border: none;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  z-index: 20;
  transition: all 0.3s;
}

.nav-arrow:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-50%) scale(1.1);
}

.nav-arrow.left {
  left: 20px;
}

.nav-arrow.right {
  right: 20px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 10px;
}

.pagination span {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  background: #eee;
  cursor: pointer;
  transition: all 0.3s;
}

.pagination span.active {
  background: #258996;
  color: white;
  transform: scale(1.1);
}

.pagination span:hover:not(.active) {
  background: #ddd;
}
.el-date-editor.el-input {
  width: 100%;
}
.el-form-item {
  margin-bottom: 22px;
}
.sub-comments {
  margin-left: 40px;
  border-left: 2px solid #eee;
  padding-left: 15px;
  margin-top: 10px;
}

.sub-comment {
  margin: 10px 0;
}

.sub-meta {
  color: #666;
  font-size: 0.9em;
}
</style>

